<!-- components/modules/ModelResponse.vue -->
<template>
  <div class="model-response">
    <div class="module-title">场景图</div>
    <div class="response-content"></div>
  </div>
</template>

<script setup>
defineProps({
  responseText: {
    type: String,
    default: '',
  },
})
</script>

<style scoped>
/* 左下角：大模型回复内容 */
.model-response {
  flex: 1; /* 占下部空间的50% */
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd; /* 边框 */
  border-radius: 8px; /* 圆角 */
  padding: 8px; /* 内边距 */
  background-color: white; /* 背景色 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  overflow: hidden; /* 防止内容溢出 */
  position: relative; /* 为子元素的绝对定位提供参考 */
}

.model-response .response-content {
  margin: 18px 0 0 0;
  flex: 1; /* 占满剩余空间 */
  overflow-y: auto; /* 纵向滚动 */
  padding: 12px; /* 内边距 */
  font-size: 18px; /* 字体大小 */
  line-height: 1.8; /* 行高 */
  color: #333; /* 文字颜色 */
  background-color: #f9f9f9; /* 背景色 */
  border-radius: 8px; /* 圆角 */
  border: 1px solid #eee; /* 边框 */
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* 使用现代字体 */
}

.model-response .response-content pre {
  margin: 10px 0; /* 上下边距 12px，左右边距 0 */
  white-space: pre-wrap; /* 允许换行 */
  word-wrap: break-word; /* 长单词换行 */
  font-family: 'Courier New', Courier, monospace; /* 使用等宽字体 */
  background-color: #f5f5f5; /* 代码块背景色 */
  padding: 8px; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  border: 1px solid #ddd; /* 边框 */
  font-size: 20px; /* 代码字体大小 */
  font-weight: bold; /* 加粗字体 */
  color: #333; /* 代码文字颜色 */
  line-height: 1.8; /* 代码行高 */
}

.model-response .response-content p {
  margin: 0 0 12px 0; /* 段落间距 */
}

.model-response .response-content strong {
  font-weight: 600; /* 加粗字体 */
  color: #000; /* 加粗文字颜色 */
}

.model-response .response-content em {
  font-style: italic; /* 斜体 */
  color: #555; /* 斜体文字颜色 */
}

.model-response .response-content code {
  font-family: 'Courier New', Courier, monospace; /* 使用等宽字体 */
  background-color: #f5f5f5; /* 代码背景色 */
  padding: 2px 4px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  border: 1px solid #ddd; /* 边框 */
  font-size: 14px; /* 代码字体大小 */
  color: #d63384; /* 代码文字颜色 */
}

/* 自定义滚动条 */
.model-response .response-content::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.model-response .response-content::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景色 */
  border-radius: 4px; /* 圆角 */
}

.model-response .response-content::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块颜色 */
  border-radius: 4px; /* 圆角 */
}

.model-response .response-content::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滚动条滑块悬停颜色 */
}
</style>
